import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

import '../constants.dart';


class RecommendedFoodItem extends StatelessWidget {
  final Map data;
  const RecommendedFoodItem({Key key, this.data});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(padding10),
      margin: EdgeInsets.fromLTRB(margin10, 0, margin8, margin10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colors.white,
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(4),
              child: CachedNetworkImage(
                imageUrl: data['image'],
                height: 100,
                width: 100,
                fit: BoxFit.cover,
              ),
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.only(left: padding8),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(data['title'],
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                      )),
                  Row(
                    children: [
                      Image.asset(
                          'assets/wm_page_home_poi_list_item_ic_rating.webp',
                          height: 8),
                      Text(
                        data['star'],
                        style: const TextStyle(fontSize: 11, color: Colors.orange),
                      ),
                      Text(
                        '月售${data['sales']}',
                        style: const TextStyle(fontSize: 11, color: Colors.grey),
                      ),
                      Spacer(),
                      Image.asset('assets/wm_common_bg_meituan_send.webp',
                          height: 18),
                    ],
                  ),
                  Row(
                    children: [
                      Text('起送 ${data['startPrice']}',
                          style: const TextStyle(color: Colors.grey, fontSize: 11)),
                      Text('配送 ${data['courierPrice']}',
                          style: const TextStyle(color: Colors.grey, fontSize: 11)),
                      Spacer(),
                      Text('${data['time']}分钟 ${data['distance']}km',
                          style: const TextStyle(color: Colors.grey, fontSize: 11))
                    ],
                  ),
                  Container(
                    margin: EdgeInsets.symmetric(
                      vertical: margin4,
                    ),
                    padding: EdgeInsets.symmetric(vertical: 2, horizontal: 6),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(4),
                      color: Colors.yellow[50],
                    ),
                    child: Text('"${data['comment']}"',
                        style: const TextStyle(color: Colors.orange, fontSize: 12)),
                  ),
                  Row(
                    children: [
                      for (String s in data['promotions'] as List<String>) PinkTag(title: s),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class PinkTag extends StatelessWidget {
  final String title;
  PinkTag({Key key, this.title});

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: const EdgeInsets.symmetric(horizontal: padding4),
        margin: const EdgeInsets.only(right: margin4),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(4),
          border: Border.all(color: Colors.red[100]),
        ),
        child: Text(
          title,
          style: TextStyle(fontSize: 12, color: Colors.red[400]),
        )
    );
  }
}
